<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .todos li{
      cursor: pointer;
    }
    .todos li:hover{
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <ul class="todos">
    <% todos.forEach(function(todo){ %>
      <li data-id="<%= todo._id %>"><%= todo.name %></li>
    <% }) %>
  </ul>

  事项：<input type="text" name="name">
  <button id='btn'>提交</button>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $('#btn').on('click', function(){
      var name = $('[name="name"]').val();
      $.ajax({
        type: 'post',
        dataType: 'json',
        contentType:"application/json",
        url: '/todo/todo',
        data: JSON.stringify({
          name: name
        }),
        success: function(){
          location.reload();
        }
      })
    })

    $('.todos li').on('click', function(){
      var id = $(this).data('id');
      $.ajax({
        type: 'delete',
        dataType: 'json',
        contentType:"application/json",
        url: '/todo/todo',
        data: JSON.stringify({
          id: id
        }),
        success: function(){
          location.reload();
        }
      })
    })
  </script>
</body>
</html>